<template>
  <div class="layout-bodyContent">
    <div class="layout-breadcrumb">
      <Breadcrumb>
        <Breadcrumb-item href="#">应用管理</Breadcrumb-item>
        <Breadcrumb-item href="#">资源管理</Breadcrumb-item>
      </Breadcrumb>
    </div>
    <div class="layout-content">
      <div class="resource-info-wrap">
        <div class="resource-info-head">
          <ButtonGroup>
            <Button type="ghost" icon="android-add">新增</Button>
            <Button type="ghost" icon="android-close">删除</Button>
            <Button type="ghost" icon="ios-compose-outline">修改</Button>
            <Button type="ghost" icon="android-search">查看</Button>
          </ButtonGroup>
        </div>

        <div class="resource-info-table">
          <Table border stripe size="small" :disabledHover="true" :columns="columns6" :data="data5"></Table>
        </div>

        <div class="resource-info-page">
          <span class="page-totals">共 40 条记录</span>
          <Page :total="40" size="small" show-elevator show-sizer></Page>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default{
    data(){
      return {
        columns6: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '歌曲名',
            key: 'songName'
          }, {
            title: '歌曲链接',
            key: 'songLink'
          },
          {
            title: '歌曲分类',
            key: 'songType'
          }
        ],
        data5: [
          {
            songName: '小跳哇',
            songLink: 'http://www.baidu.com',
            songType: '儿童歌曲'
          },
          {
            songName: '小跳哇',
            songLink: 'http://www.baidu.com',
            songType: '儿童歌曲'
          },
          {
            songName: '小跳哇',
            songLink: 'http://www.baidu.com',
            songType: '儿童歌曲'
          }
        ]
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
  @resource-info: resource-info;
  .@{resource-info} {
    &-wrap {
      padding: 20px;
    }
    &-table {
      margin-top: 20px;
      margin-bottom: 20px;
    }
    &-page,&-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
</style>
